<script setup >
import { computed, onMounted, ref } from 'vue'
import { useRouter,useRoute } from "vue-router"
import {addMonthCartAPI,getMonthCartDetailAPI,payMonthCartAPI,getMonthCartParkDetailAPI,editMonthCartAPI} from "../../../api/monthCart"
const router = useRouter()
const route = useRoute()
const form = ref({
  personName:'',
  phoneNumber:'',
  carNumber:'',
  carBrand:'',
  cardStartDate:'',
  cardEndDate:'',
  paymentAmount:'',
  paymentMethod:''

})
console.log(router);
const way = ref([{id:'Alipay',name:'支付宝'},{id:'WeChat',name:'微信'},{id:'Cash',name:'现金'}])
const options = way.value.map(i=>{
  return{
    value:i.id,
    label:i.name
  }
})
const formRef = ref(null)
const rules = ref({
  personName:[
    {required:true,message:'请填写车主姓名',trigger:'blur'}
  ],
  phoneNumber:[
    {required:true,message:'请填写联系方式',trigger:'blur'},
    {pattern:/^1[3-9]\d{9}$/ , trigger:'blur'}
  ],
  carNumber:[
    {required:true,message:'请填写车牌号码',trigger:'blur'}
  ],
  carBrand:[
    {required:true,message:'请填写车辆品牌',trigger:'blur'}
  ],
  cardStartDate:[
    {required:true,message:'请填写开始日期',trigger:'blur'}
  ],
  cardEndDate:[
    {required:true,message:'请填写结束日期',trigger:'blur'}
  ],
  paymentAmount:[
    {required:true,message:'请填写支付金额',trigger:'blur'}
  ],
  paymentMethod:[
    {required:true,message:'请填写支付方式',trigger:'blur'}
  ]
})
const setMonthCard = ()=>{
  formRef.value.validate( async(valid)=>{
    if(!valid) return
    if(view.value) router.back()
    if(renew.value){
    const {cardStartDate,cardEndDate,paymentAmount,paymentMethod,carInfoId} = form.value
    await payMonthCartAPI({cardStartDate,cardEndDate,paymentAmount,paymentMethod,carInfoId})
   }else if(edit.value){
    const {cardStatus,...data} = form.value
    console.log(cardStatus);
    await editMonthCartAPI(data)
   }else{
    await addMonthCartAPI(form.value)
  }
  
  router.back()
  
  })
  
}
const date = ref([])
const getValue = (e)=>{
  form.value.cardStartDate = e[0] 
  form.value.cardEndDate = e[1]
}
const back = ()=>{
  router.back()
}
const renew = computed(()=>{
  return router.options.history.location.includes('renewMonthCard')
})
const view = computed(()=>{
  return router.options.history.location.includes('viewMonthCard')
})
const edit = computed(()=>{
  return router.options.history.location.includes('editMonthCard')
})
const title = computed(()=>{
  return  renew.value ? '月卡续费': view.value ?'查看详情': edit.value ?'编辑月卡':'添加月卡'
})
const getMonthCartDetail = async(id)=>{
  if(renew.value){
    const res = await getMonthCartDetailAPI(id)
    date.value.splice(0,0,res.data.cardEndDate)
    res.data.paymentAmount = ''
    res.data.paymentMethod = ''
    form.value = res.data
  }
  if(view.value){
    const res = await getMonthCartParkDetailAPI(id)
    form.value = res.data
  }
  if(edit.value){
    const res = await getMonthCartDetailAPI(id)
    date.value.splice(0,0,res.data.cardStartDate,res.data.cardEndDate)
    form.value = res.data
  }
}
onMounted(()=>{
  getMonthCartDetail(route.params.id)
})
const clear = ()=>{
  if(!view.value && !renew.value) formRef.value.resetFields()
}
</script>

<template>
  <div class="setMonthCart">
    <div class="top">
      <div class="left">
        <div class="back iconfont icon-fanhui" @click="back">  返回</div>
        <div class="text">|</div>
        <div class="title">{{ title }}</div>
      </div>
      <div class="right">
        黑马管理员
      </div>
    </div>
    <div class="body">
      <el-form inline label-width="204" :model="form" ref="formRef" :rules="rules">
          <el-card header="车辆信息">
          <el-form-item label="车主姓名" prop="personName">
            <template #default>
              <span v-if="view" style="margin-right: 350px;">{{ form.personName }}</span>
              <el-input v-else :disabled="renew "  v-model="form.personName" placeholder="请输入车主姓名" style="width: 380px;"></el-input>
            </template>
          </el-form-item>
          <el-form-item label="联系方式" prop="phoneNumber">
            <template #default>
              <span v-if="view">{{ form.phoneNumber }}</span>
              <el-input v-else :disabled="renew" v-model="form.phoneNumber" placeholder="请输入联系方式" style="width: 380px;"></el-input>
            </template>
          </el-form-item>
          <el-form-item label="车牌号码" prop="carNumber">
            <template #default>
              <span v-if="view" style="margin-right: 325px;">{{ form.carNumber }}</span>
              <el-input v-else :disabled="renew" v-model="form.carNumber" placeholder="请输入车牌号码" style="width: 380px;"></el-input>
            </template>
          </el-form-item>
          <el-form-item label="车辆品牌" prop="carBrand">
            <template #default>
              <span v-if="view">{{ form.carBrand }}</span>
              <el-input v-else :disabled="renew" v-model="form.carBrand" placeholder="请输入车辆品牌" style="width: 380px;"></el-input>
            </template>
            
          </el-form-item>
        </el-card>

        <el-card header="最近一个月卡缴费信息" >
          <div v-if="view">
            <el-table :data="form.rechargeList">
              <el-table-column type="index" label="序号" label-width="120px"></el-table-column>
              <el-table-column label="有效时间" prop="">
                <template #default="{row}">
                  <span>{{ row.cardStartDate }} 至 {{ row.cardEndDate }}</span>
                </template>
              </el-table-column>
              <el-table-column label="支付金额" prop="paymentAmount"></el-table-column>
              <el-table-column label="支付方式" prop="paymentMethod"></el-table-column>
              <el-table-column label="办理时间" prop="createTime"></el-table-column>
              <el-table-column label="办理人" prop="createUser"></el-table-column>
            </el-table>
          </div>
         <div v-else>
           <el-form-item label="有效日期" prop="cardEndDate">
            <el-date-picker
                v-model="date"
                type="daterange"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                style="width: 360px;"
                value-format="x"
                @change="getValue"
              >
              <template #range-separator>
                <span class="iconfont icon-you"></span>
              </template>
            </el-date-picker>
          </el-form-item>
          <el-form-item label="支付金额" prop="paymentAmount">
            <el-input v-model="form.paymentAmount" placeholder="请输入支付金额" style="width: 380px;"></el-input>
          </el-form-item>
          <el-form-item label="支付方式" prop="paymentMethod">
            <el-select-v2
              v-model="form.paymentMethod"
              placeholder="请选择"
              :options="options"
              style="width: 380px;"
            />
          </el-form-item>
         </div>
      </el-card>
    </el-form>
  </div>
  <div class="footer" v-if="!view">
    <el-button @click="clear">重置</el-button>
    <el-button type="primary" @click="setMonthCard">确认</el-button>
  </div>
  </div>
</template>

<style scoped>

.top{
  position: fixed;
  top: 0;
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  height: 64px;
  background-color: #fff;
}
.left{
  display: flex;
}
.left .text{
  margin: 0 10px;
  color: #dcdfe5;
}
.right{
  margin-right: 2vw;
}

@font-face {
  font-family: "iconfont"; /* Project id 3539040 */
  src: url('//at.alicdn.com/t/c/font_3539040_xovmc8q3fo.woff2?t=1688310148605') format('woff2'),
       url('//at.alicdn.com/t/c/font_3539040_xovmc8q3fo.woff?t=1688310148605') format('woff'),
       url('//at.alicdn.com/t/c/font_3539040_xovmc8q3fo.ttf?t=1688310148605') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-you:before {
  content: "\e608";
}

.icon-fanhui:before {
  content: "\e606";
}
.body{
  background: #f4f6f8;
  padding: 20px 130px;
  padding-top: 82px;
  margin-bottom: 100px;
}
.el-card{
  margin-bottom: 20px;
}
.footer{
  position: fixed;
  bottom: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 24px 50px;
  background-color: #fff;
}
</style>
